#owl-login {
  width: 211px;
  height: 108px;
  background-image: url('~@/assets/images/owl-login.png');
  position: absolute;
  top: -59px;
  left: 50%;
  margin-left: -111px;
  z-index: 999;
}

@media all and (-webkit-min-device-pixel-ratio: 1.5),
  (min--moz-device-pixel-ratio: 1.5),
  (-o-min-device-pixel-ratio: 1.5/1),
  (min-device-pixel-ratio: 1.5),
  (min-resolution: 138dpi),
  (min-resolution: 1.5dppx) {
  #owl-login {
    background-image: url('~@/assets/images/owl-login@2x.png');
    -webkit-background-size: 211px 108px;
    -moz-background-size: 211px 108px;
    background-size: 211px 108px;
  }
}

#owl-login .hand {
  width: 34px;
  height: 34px;
  -webkit-border-radius: 40px;
  border-radius: 40px;
  background-color: #472d20;
  -webkit-transform: scaleY(0.6);
  -moz-transform: scaleY(0.6);
  -o-transform: scaleY(0.6);
  -ms-transform: scaleY(0.6);
  transform: scaleY(0.6);
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  -ms-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
  position: absolute;
  left: 14px;
  bottom: -7px;
  z-index: 999;
  &.handr {
    left: 170px;
  }
}

#owl-login.password .hand {
  -webkit-transform: translateX(42px) translateY(-15px) scale(0.7);
  -moz-transform: translateX(42px) translateY(-15px) scale(0.7);
  -o-transform: translateX(42px) translateY(-15px) scale(0.7);
  -ms-transform: translateX(42px) translateY(-15px) scale(0.7);
  transform: translateX(42px) translateY(-15px) scale(0.7);
  &.handr {
    -webkit-transform: translateX(-42px) translateY(-15px) scale(0.7);
    -moz-transform: translateX(-42px) translateY(-15px) scale(0.7);
    -o-transform: translateX(-42px) translateY(-15px) scale(0.7);
    -ms-transform: translateX(-42px) translateY(-15px) scale(0.7);
    transform: translateX(-42px) translateY(-15px) scale(0.7);
  }
}


#owl-login .arms {
  top: 58px;
  position: absolute;
  width: 100%;
  height: 41px;
  overflow: hidden;
}

#owl-login .arms .arm {
  width: 40px;
  height: 65px;
  position: absolute;
  left: 20px;
  top: 40px;
  background-image: url('~@/assets/images/owl-login-arm.png');
  -webkit-transition: 0.3s ease-out;
  -moz-transition: 0.3s ease-out;
  -o-transition: 0.3s ease-out;
  -ms-transition: 0.3s ease-out;
  transition: 0.3s ease-out;
  -webkit-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  -o-transform: rotate(-20deg);
  -ms-transform: rotate(-20deg);
  transform: rotate(-20deg);
  &.armr {
    -webkit-transform: rotate(20deg) scaleX(-1);
    -moz-transform: rotate(20deg) scaleX(-1);
    -o-transform: rotate(20deg) scaleX(-1);
    -ms-transform: rotate(20deg) scaleX(-1);
    transform: rotate(20deg) scaleX(-1);
    left: 158px;
  }
}

@media all and (-webkit-min-device-pixel-ratio: 1.5),
  (min--moz-device-pixel-ratio: 1.5),
  (-o-min-device-pixel-ratio: 1.5/1),
  (min-device-pixel-ratio: 1.5),
  (min-resolution: 138dpi),
  (min-resolution: 1.5dppx) {
  #owl-login .arms .arm {
    background-image: url('~@/assets/images/owl-login-arm@2x.png');
    -webkit-background-size: 40px 65px;
    -moz-background-size: 40px 65px;
    background-size: 40px 65px;
  }
}

#owl-login.password .arms .arm {
  -webkit-transform: translateY(-40px) translateX(40px);
  -moz-transform: translateY(-40px) translateX(40px);
  -o-transform: translateY(-40px) translateX(40px);
  -ms-transform: translateY(-40px) translateX(40px);
  transform: translateY(-40px) translateX(40px);
  &.armr {
    -webkit-transform: translateY(-40px) translateX(-40px) scaleX(-1);
    -moz-transform: translateY(-40px) translateX(-40px) scaleX(-1);
    -o-transform: translateY(-40px) translateX(-40px) scaleX(-1);
    -ms-transform: translateY(-40px) translateX(-40px) scaleX(-1);
    transform: translateY(-40px) translateX(-40px) scaleX(-1);
  }
}
